<template>
  <div class='container'>
    <el-dialog
      :title="bigTitle"
      :visible.sync="showDialog"
      width="30%"
      @close="close"
      >
      <el-form ref="deptFrom" :model="deptFrom" :rules="deptsRoles">
        <el-form-item label="所属学科" prop="subjectID" v-if="!this.$route.query.id">
          <el-select size="mini" v-model="deptFrom.subjectID" style="width:80%" placeholder="请选择">
            <el-option
              v-for="item in lableList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="deptFrom.directoryName" size="mini" style="width:80%" placeholder="请输入目录名称">
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="dialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { add, detail, update } from '../../api/hmmm/directorys'
import { simple } from '../../api/hmmm/subjects'
export default {

  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    addId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      lableList: [],
      deptFrom: {
        subjectID: '', // 学科ID
        directoryName: '' // 目录名称
      },
      deptsRoles: {
        subjectID: [
          { required: true, trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    bigTitle () {
      return this.addId ? '修改目录' : '新增目录'
    }
  },
  created () {
    this.getcataList()
  },
  methods: {
    // 回显数据
    async getCoreData () {
      const { data } = await detail({ id: this.addId })
      this.deptFrom.subjectID = data.subjectID
      this.deptFrom.directoryName = data.directoryName
    },
    // 表单整体校验
    dialogVisible () {
      this.$refs.deptFrom.validate(async isok => {
        if (this.addId) {
          await update({ ...this.deptFrom, id: this.addId })
          this.$message.success('修改成功')
        } else {
          if (this.$route.query.id) {
            await add({ ...this.deptFrom, subjectID: +this.$route.query.id })
          } else {
            await add(this.deptFrom)
          }
          this.$message.success('添加成功')
        }
        this.$emit('addDepatList')
        this.close()
      })
    },
    async getcataList () {
      const { data } = await simple()
      this.lableList = data
    },
    // 关闭弹层
    close () {
      this.deptFrom = {
        subjectID: '',
        directoryName: ''
      }
      this.$refs.deptFrom.resetFields()
      this.$emit('update:showDialog', false)
    }
  }

}
</script>

<style scoped lang='less'></style>
